<template>
  <div>
    <el-card>
      <!--信息表单-->
      <el-row>
        <el-form ref="form" :model="reportInfo" :inline="true" size="mini">
          <el-col :xs="12" :sm="10" :md="8" :lg="8" :xl="4">
            <el-form-item label="实验名称">
              <el-select v-model="experId" placeholder="请选择实验">
                <el-option v-for="experiment in experimentList"
                           :key="experiment.experId"
                           :label="experiment.experName"
                           :value="experiment.experId"
                           size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="4" :xl="4">
            <el-form-item label="姓名">
              <el-input style="width: 80px" disabled v-model="userInfo.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="8" :xl="4">
            <el-form-item label="截止日期">
              <el-input disabled v-model="reportInfo.endTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <el-form-item label="是否团队" prop="team">
              <el-input disabled v-model="reportInfo.isTeam" style="width: 60px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="9" :xl="7">
            <el-form-item label="团队成员" prop="team" v-if="isTeamReport">
              <el-input disabled v-model="reportInfo.teamIds" style="width: 210px"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!--进度条-->
      <el-row>
        <el-col :span="16" :pull="1" :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <el-steps :active="step" align-center>
            <el-step title="编辑中" icon="el-icon-edit"></el-step>
            <el-step title="已提交" icon="el-icon-top-right"></el-step>
            <el-step title="已评分" icon="el-icon-document-checked"></el-step>
          </el-steps>
        </el-col>
        <el-col :span="3">
          <el-button size="small" type="primary" @click="viewEdit">编辑报告</el-button>
        </el-col>
      </el-row>
      <!--编辑报告-->
      <div v-if="editVisual">
        <el-row>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="上传报告" :disabled="isTeamReport" name="first">
              <el-row>
                <el-upload
                  ref="uploadReport"
                  :action="minioUrl"
                  drag
                  :data="reportForm"
                  :headers="headers"
                  :before-upload="beforeUpload"
                  multiple
                  :limit="3"
                  :auto-upload="false"
                  :file-list="fileList">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-row>
              <el-row>
                <el-button :disabled="canntSubmit" size="small" type="primary" @click="submitReport">提交报告</el-button>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="编辑报告" :disabled="!isTeamReport" name="second">
              <el-row>
                <vue-tinymce
                  v-model="content"
                  :setting="setting"/>
              </el-row>
              <el-row>
                <el-button size="small" type="primary" @click="submitTeamReport">提交报告</el-button>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      editVisual: false,
      userInfo: '',
      experId: '',
      experimentList: [],
      activeName: 'first',
      fileList: [],
      headers: {
        // 获取token，并赋值  Authorization ，而不是token
        Authorization: window.sessionStorage.getItem('token')
      },
      content: '',
      minioUrl: 'http://139.196.238.103:10084/stuUploadReport',
      setting: {
        menubar: false,
        toolbar: 'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
        toolbar_drawer: 'sliding',
        quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        plugins: 'link image media table lists fullscreen quickbars',
        language: 'zh_CN',
        content_style: 'img {max-width:100%;}',
        height: 350
      },
      // 团队信息以及截止时间
      reportInfo: {
        experId: '',
        endTime: '',
        isTeam: '',
        teamIds: ''
      },
      // 上传报告时的参数
      reportForm: {
        experId: '',
        experName: '',
        stuId: '',
        id: '',
        date: '',
        team: '',
        status: 1
      },
      // 团队报告信息
      teamReport: {
        status: 1,
        teamIds: '',
        experId: '',
        reportContent: '123'
      },
      step: 0,
      canntSubmit: false,
      isTeamReport: false
    }
  },
  async created () {
    await this.$getUserInfo()
    await this.getExperimentList()
    this.reportForm.stuId = this.userInfo.userId
    this.reportForm.experId = this.$route.query.experId
    this.experId = this.reportForm.experId
    if (this.isTeamReport) {
      await this.getTeamReportByTeamIdAndExperId()
      this.content = this.teamReport.content
    } else {
      await this.getReportByStuIdAndExperId()
      if (this.reportForm.status === null || this.reportForm.status === '') {
        this.step = 1
      }
    }
  },
  methods: {
    async viewEdit () {
      if (this.experId === undefined || this.experId === '') {
        this.$message.info('请先选择实验')
      } else if (this.isTeamReport) {
        const { data: res } = await this.$http.post('/editTeamReport', this.reportInfo).catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
        if (res.status === 401) {
          this.$message.error(res)
          await this.$router.push('/login')
        }
        if (res.status === 101 || res.status === 103) {
          await this.getTeamReportByTeamIdAndExperId()
          this.editVisual = true
        } else if (res.status === 102) {
          this.$message.info(res.message)
        } else {
          this.$message.error('请求出错')
        }
      } else {
        this.editVisual = true
      }
    },
    beforeUpload () {
      // console.log(this.reportForm)
      return this.$confirm('确定上传这些文件吗？')
    },
    async submitTeamReport () {
      this.teamReport.reportContent = this.content
      const { data: res } = await this.$http.post('/submitTeamReport', this.teamReport)
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status === 201) {
        this.$message.error(res.message)
      } else if (res.status === 200) {
        this.$message.success(res.data)
        this.editVisual = false
      } else {
        this.$message.error(res.data)
      }
    },
    submitReport () {
      // console.log(this.fileList)
      this.$refs.uploadReport.submit()
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getExperimentList () {
      const { data: res } = await this.$http.post('/getExperimentListByStuId')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error('获取实验列表失败')
      this.experimentList = res.data.experiments
    },
    async getReportByStuIdAndExperId () {
      const { data: res } = await this.$http.post('/getReportByStuIdAndExperId', { experId: this.experId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error('获取实验列表失败')
      // console.log(res.data.report)
      if (res.data.report !== null) {
        this.reportForm = res.data.report
        this.step = this.reportForm.status
      } else {
        this.reportForm = {}
        this.reportForm.stuId = this.userInfo.userId
        this.reportForm.experId = this.experId
        this.reportForm.status = '1'
        this.step = 0
      }
    },
    async getTeamReportByTeamIdAndExperId () {
      this.step = this.teamReport.status
      const { data: res } = await this.$http.post('/getTeamReportByTeamIdAndExperId', this.reportInfo)
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error('获取实验列表失败')
      if (res.data.teamReport !== null) {
        this.teamReport = res.data.teamReport
        this.step = this.teamReport.status
        this.content = this.teamReport.reportContent
      }
    },
    async getReportInfoByStuIdAndExperId () {
      const { data: res } = await this.$http.post('/getReportInfoByStuIdAndExperId', { experId: this.experId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status === 401) {
        this.$message.error(res)
        await this.$router.push('/login')
      }
      if (res.status !== 200) this.$message.error('获取实验信息失败')
      // console.log(res.data.report)
      if (res.data.reportInfo !== null) {
        this.reportInfo = res.data.reportInfo
        if (this.reportInfo.teamIds !== null) {
          this.reportInfo.isTeam = '是'
          this.isTeamReport = true
          this.activeName = 'second'
        } else {
          this.reportInfo.isTeam = '否'
          this.isTeamReport = false
          this.activeName = 'first'
        }
      } else {
        this.reportInfo = {}
      }
    }
  },
  watch: {
    experId: async function (val, oldVal) {
      this.editVisual = false
      this.$route.query.experId = val
      this.experId = val
      await this.getReportInfoByStuIdAndExperId()
      if (this.isTeamReport) {
        this.teamReport.experId = val
        this.teamReport.teamIds = this.reportInfo.teamIds
        await this.getTeamReportByTeamIdAndExperId()
      } else {
        await this.getReportByStuIdAndExperId()
      }
      // 已评分则禁用提交按钮
      this.canntSubmit = this.reportForm.status === 3
    }
  }
}
</script>

<style scoped>
</style>
